<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="../favicon.ico" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class Calculator extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            text: "", // 实时更新输入的数据
          };
        }

        //用于修改显示的数值
        change = (e) =>
          this.setState({ text: this.state.text + e.target.innerText });

        //进行计算（调用数学方式）使用 eval()
        cal = () => this.setState({ text: eval(this.state.text) });

        //删除最后一位
        del = () =>
          this.setState({
            text: this.state.text.substring(0, this.state.text.length - 1),
          });

        //归零
        cl = () => this.setState({ text: "" });

        render() {
          return (
            <div className="form">
              <div>
                <div className="head">
                  {/*========输入框======*/}
                  <input
                    type="text"
                    id="ipt"
                    className="ipt"
                    value={this.state.text}
                  />
                </div>
                <div>
                  <div className="number1">
                    {/*第一列键盘*/}
                    <button
                      style={{ height: "35px", width: "30px" }}
                      onClick={this.cal}
                    >
                      =
                    </button>
                    <button
                      style={{ height: "35px", width: "30px" }}
                      onClick={this.cl}
                    >
                      C
                    </button>
                    <button
                      style={{ height: "35px", width: "30px" }}
                      onClick={this.change}
                    >
                      %
                    </button>
                    <button
                      style={{ height: "35px", width: "30px" }}
                      onClick={this.change}
                    >
                      /
                    </button>
                  </div>
                  <div className="number2">
                    {/*第二列键盘*/}
                    <button
                      style={{ height: "35px", width: "30px" }}
                      onClick={this.change}
                    >
                      1
                    </button>
                    <button
                      style={{ height: "35px", width: "30px" }}
                      onClick={this.change}
                    >
                      2
                    </button>
                    <button
                      style={{ height: "35px", width: "30px" }}
                      onClick={this.change}
                    >
                      3
                    </button>
                    <button
                      style={{ height: "35px", width: "30px" }}
                      onClick={this.change}
                    >
                      *
                    </button>
                  </div>
                  <div className="number3">
                    {/*第三列键盘*/}
                    <button
                      style={{ height: "35px", width: "30px" }}
                      onClick={this.change}
                    >
                      4
                    </button>
                    <button
                      style={{ height: "35px", width: "30px" }}
                      onClick={this.change}
                    >
                      5
                    </button>
                    <button
                      style={{ height: "35px", width: "30px" }}
                      onClick={this.change}
                    >
                      6
                    </button>
                    <button
                      style={{ height: "35px", width: "30px" }}
                      onClick={this.change}
                    >
                      -
                    </button>
                  </div>
                  <div className="number4">
                    {/*第四列键盘*/}
                    <button
                      style={{ height: "35px", width: "30px" }}
                      onClick={this.change}
                    >
                      7
                    </button>
                    <button
                      style={{ height: "35px", width: "30px" }}
                      onClick={this.change}
                    >
                      8
                    </button>
                    <button
                      style={{ height: "35px", width: "30px" }}
                      onClick={this.change}
                    >
                      9
                    </button>
                    <button
                      style={{ height: "35px", width: "30px" }}
                      onClick={this.change}
                    >
                      +
                    </button>
                  </div>
                  <div className="number5">
                    {/*第五列键盘*/}
                    <button
                      style={{ height: "30px", width: "30px" }}
                      onClick={this.del}
                    >
                      ←
                    </button>
                    <button
                      style={{ height: "30px", width: "30px" }}
                      onClick={this.change}
                    >
                      0
                    </button>
                    <button
                      style={{ height: "30px", width: "30px" }}
                      onClick={this.change}
                    >
                      .
                    </button>
                    <button
                      style={{ height: "30px", width: "30px" }}
                      onClick={this.change}
                    >
                      {" "}
                    </button>
                  </div>
                </div>
              </div>
            </div>
          );
        }
      }

      ReactDOM.render(<Calculator/>,document.getElementById('root'))
    </script>
  </body>
</html>
